import { Alert, Tabs } from '@aws-amplify/ui-react';

One of the goals of Amplify is to be a good citizen of the environment it exists in. As such Amplify works hard to not interfere with other tools that are being used.

There are many CSS In JS libraries out there that give a number of benefits. Amplify does not use a CSS In JS library to implement its theming system but operates well with the major CSS In JS libraries out there. Below are a few of the libraries with descriptions of how they work with Amplify's theming system.

<Alert variation="warning" role="none">
  If your CSS library depends on injecting style tags into the DOM, make sure they are being injected <b>after</b> Amplify UI's style tag. In other words, ensure the style tag for Amplify UI is listed above your custom styles in the `<head>` tag. If Amplify UI's styles are injected after custom styles, then your custom styles may be unset.
</Alert>

<Tabs.Container defaultValue="Styled Components">
  <Tabs.List>
    <Tabs.Item value="Styled Components">Styled Components</Tabs.Item>
    <Tabs.Item value="JSS">JSS</Tabs.Item>
    <Tabs.Item value="Emotion">Emotion</Tabs.Item>
    <Tabs.Item value="Aphrodite">Aphrodite</Tabs.Item>
  </Tabs.List>
<Tabs.Panel value="Styled Components">
[Styled Components](https://github.com/styled-components/styled-components) allows you to create visual primitives with actual CSS code directly tied to components.

## Usage

```jsx
import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const StyledView = styled(View)`
  background-color: black;
  font-size: 32px;
`;

//use it like any other amplify-ui component
<StyledView color="red" className="my-styled-view">
  This is my Styled View
</StyledView>;
```

## Interactions

There are various ways to customize an Amplify component and Styled Components will interact with these customizations in the following ways:

### Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over Styled Component styling.

```jsx
import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const StyledView = styled(View)`
  color: blue;
`;

<StyledView color="red">Using Styling props</StyledView>;
```

In the example above, the color of the view will be set to `red` because of the Amplify styling prop.

### Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`.

```jsx
import * as React from 'react';
import styled from "styled-components";
import { Button } from '@aws-amplify/ui-react';

const StyledButton = styled(Button)`
  color: blue
`;

<StyledButton variation="primary">Primary Button</StyledButton>
```

In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the Styled Components color value of blue will take precedence over the amplify-ui variation styling.

### Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

```jsx
import * as React from 'react';
import styled from 'styled-components';
import { View } from '@aws-amplify/ui-react';

const styledView = styled(View)`
  color: blue;
`;

<styledView className="my-styled-view">My Styled View</styledView>;
```

```CSS
/* External Style Sheet */
.my-styled-view {
  color: red;
}
```

In the example above, the color of the view will be `blue` because the styled component will take precedence over the classname CSS.

### CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used with the `:root` CSS psuedo-class to override all instances of component styling.

```jsx
import * as React from 'react';
import styled from 'styled-components';
import { Button } from '@aws-amplify/ui-react';

const StyledButton = styled(Button)`
  color: blue;
`;

<StyledButton>Button</StyledButton>;
```

```CSS
/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}
```

In the example above, the button color will be set to `blue` because the Styled Component will take precedence over the Amplify CSS variable.

</Tabs.Panel>

<Tabs.Panel value="JSS">
[JSS](https://github.com/cssinjs/jss/tree/master/packages/react-jss) is a library for generating Style Sheets with Javascript.

## Usage

```jsx
import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();

//use the JSS create classes in the Amplify ui className
<Text className={classes.styledText}>This is my JSS Text </Text>;
```

## Interactions

There are various ways to customize an Amplify component and JSS will interact with these customizations in the following ways:

### Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over JSS styling.

```jsx
import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();

<Text className={classes.styledText} color="red">
  This is my JSS Text
</Text>;
```

In the example above, the color of the view will be set to `red` because of the Amplify styling prop.
### Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`.

```jsx
import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { Button } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledButton: {
    color: 'blue',
  },
});

const classes = useStyles();

<Button className={classes.styledButton} variation="primary">
  Primary Button
</Button>;
```

In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the JSS color value of blue will take precedence over the amplify-ui variation styling.

### Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

```jsx
import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { View } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledText: {
    color: 'blue',
  },
});

const classes = useStyles();
const classNames = `${classes.styledText} my-styled-text`;

<Text className={classNames}>This is my JSS Text </Text>;
```

```CSS
/* External Style Sheet */
.my-styled-text {
  color: red;
}
```

In the example above, the color of the text will be `blue` because the JSS styling will take precedence over the classname CSS.

### CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

```jsx
import * as React from 'react';
import { createUseStyles } from 'react-jss';
import { Button } from '@aws-amplify/ui-react';

const useStyles = createUseStyles({
  styledButton: {
    color: 'blue',
  },
});

const classes = useStyles();

<Button className={classes.styledButton}>Button</Button>;
```

```CSS
/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}
```

In the example above, the button color will be set to `blue` because the JSS styling will take precedence over the Amplify CSS variable.

</Tabs.Panel>

<Tabs.Panel value="Emotion">
[Emotion](https://github.com/emotion-js/emotion) is a library designed for writing css styles with JavaScript.

## Usage

```jsx
/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

//use the Emotion css function and css prop
<Text css={css(styles)}>This is my Emotion Text </Text>;
```

## Interactions

There are various ways to customize an Amplify component and Emotion will interact with these customizations in the following ways:

### Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. These Amplify styling props will take precedence over Emotion styling.

```jsx
/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Text css={css(styles)} color="red">
  This is my Emotion Text
</Text>;
```

In the example above, the color of the view will be set to `red` because of the Amplify styling prop.

### Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`.

```jsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Button } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Button css={css(styles)} variation="primary">
  Primary Button
</Button>;
```

In the example above, the color of the button will be set to `blue`. Although the `primary` variation has a color value of white the Emotion color value of blue will take precedence over the amplify-ui variation styling.

### Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

```jsx
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { Text } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Text css={css(styles)} className="my-styled-text">
  This is my Emotion Text
</Text>;
```

```CSS
/* External Style Sheet */
.my-styled-text {
  color: red;
}
```

In the example above, the color of the text will be `blue` because the Emotion styling will take precedence over the classname CSS.

### CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

```jsx
/** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react';
import { Button } from '@aws-amplify/ui-react';

const styles = {
  color: 'blue',
};

<Button css={css(styles)}>Button</Button>;
```

```CSS
/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}
```

In the example above, the button color will be set to `blue` because the Emotion styling will take precedence over the Amplify CSS variable.

</Tabs.Panel>

<Tabs.Panel value="Aphrodite">
[Aphrodite](https://github.com/Khan/aphrodite) is a Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.

## Usage

```jsx
import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

//use the Aphrodite css function and the className prop
<Text className={css(styles.blue)}>This is an aphrodite Text component</Text>;
```

## Interactions

There are various ways to customize an Amplify component and Aphrodite will interact with these customizations in the following ways:

### Amplify Styling Props

These are styling props that can be used directly on an Amplify component which will affect a single style property. Examples of styling props are `color` or `fontWeight`. Aphrodite will take precedence over these Amplify styling props.

```jsx
import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Text className={css(styles.blue)} color="red">
  This is an aphrodite Text component
</Text>;
```

In the example above, the color of the view will be set to `blue` because of the Aphrodite styling will take precedence.

### Amplify variation props

These props change the look and/or behavior of certain Amplify components. Examples include `size` and `variation`.

```jsx
import { StyleSheet, css } from 'aphrodite';
import { Button } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Button className={css(styles.blue)} variation="primary">
  Primary Button
</Button>;
```

In the example above, the color of the button will be set to `blue`, because the Aphrodite styling will take precedence over the Amplify variation styling.

### Amplify Custom ClassNames

These are custom classnames added onto Amplify components and can be used with CSS styling rules to modify the look of an Amplify component.

```jsx
import { StyleSheet, css } from 'aphrodite';
import { Text } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

const classNames = `${css(styles.blue)} my-styled-text`;

<Text className={classNaes}>This is an aphrodite Text component</Text>;
```

```CSS
/* External Style Sheet */
.my-styled-text {
  color: red;
}
```

In the example above, the color of the text will be `blue` because the Aphrodite styling will take precedence over the classname CSS.

### CSS Root Variable Overrides

Amplify theming provides many CSS variables to customize the look and feel of the entire application. These CSS variables can be used at a root level to override all instances of component styling.

```jsx
/** @jsxImportSource @emotion/react */
import { StyleSheet, css } from 'aphrodite';
import { Button } from '@aws-amplify/ui-react';

const styles = StyleSheet.create({
  blue: {
    color: 'blue',
  },
});

<Button className={css(styles.blue)}>Button</Button>;
```

```CSS
/* External Style Sheet */
:root {
  --amplify-components-button-color: red;
}
```

In the example above, the button color will be set to `blue` because the Aphrodite styling will take precedence over the Amplify CSS variable.

</Tabs.Panel>

</Tabs.Container>
